<template>
  <nm-container>
    <el-form label-width="80px" :inline="true" style="background:white; padding:20px">
      <el-form-item label="退废" prop="station_id" class="Dh_label">
        <el-select v-model="selectValue" filterable clearable placeholder="请选择" @change="getType">
          <el-option label="退票" value="1" />
          <el-option label="废票" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="station_id">
        <el-date-picker v-model="formList.startDate" clearable type="date" placeholder="选择日期" style="width:200px"> </el-date-picker>
      </el-form-item>
      <el-form-item label="出发(F6)" prop="station_id">
        <el-select v-model="formList.startStationId" filterable clearable placeholder="请选择班次">
          <el-option v-for="item in stationList" :key="item.station_name" :label="item.station_name" :value="item.id"> </el-option>
        </el-select>
        <!-- <el-input v-model="formList.startStationId" /> -->
      </el-form-item>
      <el-form-item label="班次(D)" prop="runBusId">
        <el-select v-model="formList.busNum" filterable clearable placeholder="请选择班次">
          <el-option v-for="item in vehicleList" :key="item.busNum" :label="item.busNum" :value="item.busNum"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="票号起(F5)" prop="station_id">
        <el-input v-model="formList.startTicketNum" placeholder="票号(F5)" />
      </el-form-item>
      <el-form-item label="票号止(F6)" prop="station_id">
        <el-input v-model="formList.endTicketNum" placeholder="票号(F6)" />
      </el-form-item>
      <el-form-item label="证件号(F)" prop="station_id">
        <el-input v-model="formList.cardId" placeholder="证件号(F)" />
      </el-form-item>
      <!-- <el-form-item label="是否累计(F7)" prop="station_id" label-width="100px" class="Dh_label">
        <div style="width:180px">
          <el-checkbox v-model="checked"></el-checkbox>
        </div>
      </el-form-item> -->
      <!-- <el-form-item label="乘车人" prop="station_id" class="Dh_label">
        <el-input v-model="ticketInfo.passengerName" :disabled="true" />
      </el-form-item> -->
      <el-form-item label="姓名" prop="station_id" class="Dh_label">
        <el-input v-model="ticketInfo.passengerName" :disabled="true" />
      </el-form-item>
      <el-form-item label="张数" prop="station_id" class="Dh_label">
        <el-input v-model="ticketInfo.seatNum" :disabled="true" />
      </el-form-item>
      <!-- <el-form-item label="余票数" prop="station_id">
        <el-input v-model="bill" :disabled="true" />
      </el-form-item> -->
      <!-- <el-form-item label="当前票号" prop="station_id" class="Dh_label">
        <el-input v-model="ticketInfo.paperTicketNum" :disabled="true" />
      </el-form-item> -->
      <el-form-item label="预退票价" prop="station_id" class="Dh_labels">
        <el-input v-model="ticketInfo.refundMoney" :disabled="true" />
      </el-form-item>
      <!-- <el-form-item label="手续费" prop="station_id" class="Dh_labels">
        <el-input v-model="bill" :disabled="true" />
      </el-form-item> -->
      <!-- <el-form-item label="应退款" prop="station_id" class="Dh_label">
        <el-input v-model="bill" :disabled="true" />
      </el-form-item> -->
      <el-form-item label="预退金额" prop="station_id" class="Dh_labels">
        <el-input v-model="ticketInfo.refundMoney" :disabled="true" />
      </el-form-item>
      <nm-button type="primary" @click="getData" text="查询" style="margin-left:20px"></nm-button>
      <nm-button type="primary" @click="sendData" text="退票/废票" style="margin-left:20px"></nm-button>
      <!-- <nm-button type="primary" @click="sendData" text="废票" style="margin-left:20px"></nm-button> -->
    </el-form>
    <div class="Dh_table">
      <el-table
        @select="checkRow"
        @select-all="checkAll"
        highlight-current-row
        tooltip-effect="dark"
        :max-height="height"
        @current-change="handleCurrentChange"
        ref="topictable"
        :data="getList"
        border
        align="center"
        :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold', color: '#030202' }"
        :cell-style="{ 'text-align': 'center' }"
        style="width: 100%;text-align: center;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="paperTicketNum" label="客票号"> </el-table-column>
        <el-table-column prop="busDate" label="日期">
          <template slot-scope="scope">
            <span>{{ getDateFun(scope.row.busDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="时间"> </el-table-column>
        <el-table-column prop="startStationName" label="上车站"> </el-table-column>
        <el-table-column prop="busNum" label="班次"> </el-table-column>
        <el-table-column prop="seatNum" label="座位"> </el-table-column>
        <el-table-column prop="endStationName" label="到达站"> </el-table-column>
        <el-table-column prop="ticketPrice" label="票价"> </el-table-column>
        <el-table-column prop="ticketType" label="折扣率"> </el-table-column>
        <el-table-column prop="refundFee" label="手续费"> </el-table-column>
        <el-table-column prop="remainTicket" label="售票员"> </el-table-column>
      </el-table>
    </div>

    <el-pagination background layout="prev, pager, next" :total="total / 10" />
  </nm-container>
</template>
<script>
import { mixins } from 'netmodular-ui'
import page from './page'
const api = $api.dispatch.retreat_ticket

export default {
  name: page.name,
  mixins: [mixins],
  data() {
    return {
      formList: {},
      selectValue: '',
      today: '',
      bill: '',
      checked: '',
      getList: [],
      total: '',
      height: 400,
      start: true,
      forbidden: false,
      id: '',
      status: false,
      checkVal: [],
      vehicleList: [],
      ticketInfo: {},
      stationList: [],
      listLength: '',
      arrnew: [],
      condition: '',
      single: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - this.$refs.topictable.$el.offsetTop - 150
    })
    this.enterDown()
    this.getTime()
    // this.getData()
    // this.getVehicle()
    this.getForseLect()
    this.getStation()
  },
  methods: {
    enterDown() {
      document.onkeydown = () => {
        if (window.event.keyCode == 13) {
          // 监听Enter键，按下后处理改签、退票逻辑
          this.sendData()
        }
      }
    },
    // 获取班次列表
    getForseLect() {
      api.querybusinfoforselect().then(res => {
        this.vehicleList = res
      })
    },
    //获取出发站点
    getStation() {
      api.stationQuery().then(res => {
        this.stationList = res.rows
      })
    },
    checkRow(e) {
      this.selectRow = e
    },
    checkAll(e) {
      this.selectRow = e
    },
    // 改签、退票逻辑处理
    sendData() {
      if (this.condition == '') {
        this.$message.warning('请先在上方选择退票或改签')
      } else {
        if (this.listLength == 1) {
          // 单张退废
          api.refundticket(this.single[0]).then(res => {
            console.log(res)
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getData()
          })
        } else {
          // 多张退费
          if (this.arrnew.length == 0) {
            this.$message({
              message: '请选择一条数据',
              type: 'warning'
            })
          } else {
            api.refundtickets(this.arrnew).then(res => {
              console.log(res)
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getData()
            })
          }
        }
      }
    },
    // 列表数据
    getData() {
      api.getorderinfo(this.formList).then(res => {
        if (res.length == 0) {
          this.$message({
            message: '未查询到信息',
            type: 'warning'
          })
        } else {
          this.getList = res
        }
      })
      // }
    },
    // 点击列表某一行触发
    handleCurrentChange(data) {
      this.ticketInfo = data
    },
    //获取是退票还是废票
    getType(val) {
      this.condition = val
      this.$refs.topictable.clearSelection()
    },
    // 多选
    handleSelectionChange(val) {
      this.listLength = val.length
      if (val.length == 1) {
        this.single = val.map(item => {
          return Object.assign({}, { ticketId: item.id, type: this.condition })
        })
      } else {
        this.arrnew = val.map(item => {
          return Object.assign({}, { ticketId: item.id, type: this.condition })
        })
      }
    },
    getTime() {
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let isDate = y + '-' + m + '-' + d
      this.today = isDate
    },
    getDateFun(num) {
      var d = new Date(num)
      var y = d.getFullYear()
      var m = d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1
      var day = d.getDate() < 10 ? `0${d.getDate() + 1}` : d.getDate()
      return `${y}-${m}-${day}`
    }
  }
}
</script>

<style>
.Dh_label .el-form-item__label {
  color: red;
}
.Dh_labels .el-form-item__label {
  color: blue;
}
</style>
